﻿<%@ Page Title="月度报表" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="MonthChart.aspx.cs" Inherits="WorkSummaryReoprter.MonthChart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <%--<script src="./Scripts/echarts.min.js"></script>--%>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
        <div class="container">
            <div id="main" style="height: 400px"></div>
        </div>
        <div class="container">
            <div class="col-md-7">
                <div id="person" style="height: 280px"></div>
            </div>
            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading">表格配置</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <select id="user" class="selectpicker form-control" data-live-search="true">
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="input-daterange input-group" id="chart_datepicker">
                                <input type="text" id="chart_s" class="form-control" name="start" />
                                <span class="input-group-addon">to</span>
                                <input type="text" id="chart_e" class="form-control" name="end" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--下chart config-->
        <script type="text/javascript">
            var mainChart = echarts.init(document.getElementById('main'));
            var UserArray = new Array();
            var DataArray = new Array();
            var MarkPointArray = new Array();
            var option_m = {
                title: {
                    text: '近30日工作量统计'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['工作量']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: UserArray
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '工作量',
                        type: 'bar',
                        data: DataArray,
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        },
                        markPoint: {
                            data: MarkPointArray
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                      '#D7504B', '#E87C25', '#F0805A', '#26C0C0', '#27727B',
                                       '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                       '#C6E579', '#F4E001', '#C1232B', '#B5C334', '#FCCE10'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}'
                                }
                            }
                        }
                    }
                ]
            };
        </script>
    <!--左上chart config-->
    <script type="text/javascript">
        var personChart = echarts.init(document.getElementById('person'));
        var TaskArray_p = new Array();
        var DataArray_p = new Array();
        var option_p = {
            title: {
                text: '近30日任务比例',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: TaskArray_p
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    magicType: {
                        show: true,
                        type: ['pie'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [
                {
                    name: '任务比例',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: DataArray_p
                }
            ]
        };
    </script>
    <!--init-->
    <script>
        function InitMainChart() {
            var sDate = $("#chart_s").val();
            var eDate = $("#chart_e").val();
            if (IsNullOrEmpty(sDate) || IsNullOrEmpty(eDate)) {
                return;
            }
            $.ajax({
                url: '../ashx/Common.ashx?action=GetChartDataWithDate',
                data: { sDate: sDate, eDate: eDate },
                success: function (r) {
                    var ret = JSON.parse(r);
                    if (ret.code == -1) {
                        ShowMsg(ret.info, "error");
                    } else {
                        data = ret.info;
                        UserArray.length = 0;
                        DataArray.length = 0;
                        MarkPointArray.length = 0;
                        data.forEach(function (v, index) {
                            UserArray.push(v.ItemArray[0]);
                            if (v.ItemArray[1] == null) {
                                DataArray.push(0);
                                MarkPointArray.push({ name: "任务数", value: 0, xAxis: index, yAxis: 0 });
                            } else {
                                DataArray.push(v.ItemArray[1]);
                                MarkPointArray.push({ name: "任务数", value: v.ItemArray[2], xAxis: index, yAxis: v.ItemArray[1] });
                            }
                        })
                        option_m.title.text = sDate.substr(0, 10) + "到" + eDate.substr(0, 10) + "工作量统计";
                        mainChart.clear();
                        mainChart.setOption(option_m);
                    }
                }
            });
        }
        function InitPersonChart() {
            $.ajax({
                url: '../ashx/Common.ashx?action=GetPieDataByUser',
                data: { userid: $("#user").val() },
                success: function (r) {
                    var ret = JSON.parse(r);
                    if (ret.code == -1) {
                        ShowMsg(ret.info, "error");
                    } else {
                        data = ret.info;
                        if (data.length != 0) {
                            TaskArray_p.length = 0;
                            DataArray_p.length = 0;
                            data.forEach(function (v, index) {
                                if (v.ItemArray[1] != "" && v.ItemArray[1].length >= 6) {
                                    let temp = v.ItemArray[1].substr(0, 5) + "..."
                                    TaskArray_p.push(temp);
                                    DataArray_p.push({ name: temp, value: v.ItemArray[2] });
                                } else {
                                    TaskArray_p.push(v.ItemArray[1]);
                                    DataArray_p.push({ name: v.ItemArray[1], value: v.ItemArray[2] });
                                }

                            })
                            option_p.title.text = $("#user option:selected").text() + "近30日任务比例";
                            personChart.clear();
                            personChart.setOption(option_p);
                        }
                    }
                }
            });
        }
        function InitSelect() {
            var html = "";
            $.ajax({
                url: '../ashx/Common.ashx',
                data: { action: "GetUsers" },
                success: function (r) {
                    var ret = JSON.parse(r);
                    ret.forEach(function (u, index) {
                        html += "<option value='" + u.UserID + "'>" + u.UserName + "</option>";
                    })
                    $("#user").html(html);
                    InitPersonChart();
                }
            });
        }
        function InitDatePicker() {
            var now = moment().format("YYYY-MM-DD");
            var earlyer = moment().add(-30, "days").format("YYYY-MM-DD");
            $("#chart_s").val(earlyer);
            $("#chart_e").val(now);
            InitMainChart();
        }
        $(function () {
            $("#user").on("change", function () {
                InitPersonChart();
            })
            $("#chart_s").on("change", function () {
                InitMainChart();
            })
            $("#chart_e").on("change", function () {
                InitMainChart();
            })
            $('#chart_datepicker').datepicker({
                todayBtn: "linked",
                format: "yyyy-mm-dd",
                clearBtn: true,
                todayHighlight: true,
                language: "zh-CN"
            });
            InitSelect();
            InitDatePicker();
        })
    </script>
</asp:Content>
